<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ taglib prefix="tags" tagdir="/WEB-INF/tags" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<head>
    <title>文档编研</title>
    <link rel="stylesheet" href="${ctx}/static/styles/news/wangEditor.min.css" type="text/css">
    <script src="${ctx}/static/js/jquery-2.1.1.min.js" type="text/javascript"></script>
</head>
<body style="margin: 10px; width: 98%; font-family: Microsoft YaHei,SimSun">
<!--顶部-->
<div class="container" style="height: 950px;">
    <legend style="margin-top: 15px;">文档编研</legend>
    <div id="left" style="height: 770px; width: 49%; float: left; margin-top: 25px">
        <table class="table table-striped table-bordered">
            <thead>
            <tr>
                <td>
                    标题
                </td>
                <td>
                    作者
                </td>
                <td>
                    文档时间
                </td>
                <td>
                    操作
                </td>
            </tr>
            </thead>
            <input type="hidden" id="docSelected">
            <c:forEach items="${docs}" var="doc">
                <tr>
                    <td>
                            ${doc.title}
                    </td>
                    <td>
                            ${doc.authors}
                    </td>
                    <td>
                        <fmt:formatDate value="${doc.docTime}" type="date" dateStyle="long"/>
                    </td>
                    <td>
                        <a class="btn btn-success" onclick="getDoc('${doc.id}')">编辑文档</a>
                    </td>
                </tr>
            </c:forEach>
        </table>
    </div>
    <!--右-->
    <div id="right" style="padding: 4px; height: auto; width: 49%; float: right; margin-top: 25px">
        <form id="inputForm" action="${ctx}/doc/updateDoc" method="post" class="form-horizontal">
            <input type="hidden" id="selectedDocId" name="id"/>
            <div class="form-group">
                <label class="news-label">摘要</label>
                <textarea id="docSummary" name="summary" style="height: 100px; width: 100%;"></textarea>
            </div>
            <div class="form-group">
                <label class="news-label">正文</label>
                <textarea id="docContent" name="content" style="height: 200px; width: 100%;"></textarea>
            </div>
            <div class="form-group">
                <label class="news-label">编辑内容</label>
                <textarea class="form-control" rows="15" id="editArea" name="keynote"></textarea>
            </div>
            <div class="news-btn-area">
                <button type="submit" class="btn btn-success info-submit">
                    <span class="glyphicon glyphicon-ok"></span> 发布
                </button>
                <button type="reset" class="btn btn-danger">
                    <span class="glyphicon glyphicon-remove"></span> 重置
                </button>
            </div>
        </form>
    </div>
    <script>
        function getDoc(data) {
            var docId = data;
            $("#selectedDocId").val(docId);
            $.ajax({
                type: "GET",
                url: "${ctx}/doc/getDoc?docId=" + docId,
                dataType: "json",
                success: function (data) {
                    $("#docSummary").html(data.summary);
                    $("#docContent").html(data.content);
                    $("#editArea").html(data.keynote);
                }
            });
        }
        function updateDoc() {
            var docId = $("#selectedDocId").val();
            var summary = $("#docSummary").val();
            var content = $("#docContent").val();
            var keynote = $("#editArea").val();
            $.ajax({
                type: "post",
                url: "${ctx}/doc/updateDoc",
                data: {id: docId, summary: summary, content: content, keynote: keynote},
                dataType: "json",
                success: function () {
                    alert("编辑成功！");
                }
            });
        }
    </script>
</div>
<script src="${ctx}/static/js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="${ctx}/static/plugins/wangeditor/wangEditor.min.js" type="text/javascript"></script>
<script type="text/javascript">
    var editor = new wangEditor('editArea');
    editor.config.menus = [
        'source',
        'bold',
        'underline',
        'italic',
        'strikethrough',
        'eraser',
        'forecolor',
        'bgcolor',
        'quote',
        'fontfamily',
        'fontsize',
        'head',
        'unorderlist',
        'orderlist',
        'alignleft',
        'aligncenter',
        'alignright',
        'link',
        'unlink',
        'undo',
        'redo',
        'fullscreen'
    ];
    editor.create();
</script>
</body>
</html>